<template>
  <div class="shop-wrap">
    <div class="shop-detail">
      <div class="shop-name">
        <div class="border">
          <div class="shop-scroce">
            <span class="name">{{ shopData.name }}</span>
            <div>
              <van-rate
                v-model="value"
                :count="value"
                color="#ffd21e"
                size="13"
              />
              <span class="count">({{ shopData.score }})</span>
              <span class="saleMons">月售{{ shopData.sellCount }}单</span>
            </div>
          </div>
          <div>
            <div class="like" v-show="liked" @click="handleON">
              <van-icon name="like" color="red" />
              <span class="like-words">已收藏</span>
            </div>
            <div class="like" v-show="!liked" @click="handleOK">
              <van-icon name="like-o" />
              <span class="like-words">收藏</span>
            </div>
          </div>
        </div>
      </div>
      <div class="shop-money">
        <div>
          <span class="fs13">起送价</span>
          <span class="fs13"
            ><span class="fs20">{{ shopData.minPrice }}</span
            >元</span
          >
        </div>
        <div>
          <span class="fs13">商家配送</span>
          <span class="fs13"
            ><span class="fs20">{{ shopData.deliveryPrice }}</span
            >元</span
          >
        </div>
        <div>
          <span class="fs13">平均配送时间</span>
          <span class="fs13"
            ><span class="fs20">{{ shopData.deliveryTime }}</span
            >分钟</span
          >
        </div>
      </div>
    </div>
    <div class="supports">
      <h2>活动与公告</h2>
      <p class="supports-content">{{ shopData.bulletin }}</p>
      <div class="supportsList">
        <p v-for="(v, i) in shopData.supports" :key="i">
          <span class="reduce">减</span>
          <span class="supportsListWords">{{ v }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapActions,mapMutations } from "vuex";
export default {
  data() {
    return {
      value: 4,
      liked: true,
    };
  },
  computed: {
    ...mapState('shop',["shopData"]),
  },
  
  methods: {
    ...mapActions('shop',['A_getShopData']),
    ...mapMutations('shop',['SHOP_DETAILS']),
    //点击变为false
    handleON() {
      this.liked = false;
    },
    handleOK() {
      this.liked = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-wrap {
  background-color: #eee;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: scroll;
  .shop-detail {
    background-color: #fff;
    padding-bottom: 20px;
    .shop-name {
      padding: 20px;
      .border {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
      }

      .shop-scroce {
        .name {
          display: block;
          margin-bottom: 10px;
          font-weight: 500;
        }
        .count {
          color: #888;
          font-size: 14px;
          margin-right: 10px;
        }
        .saleMons {
          font-size: 14px;
          color: #888;
        }
      }
      .like {
        display: flex;
        flex-direction: column;
        align-items: center;
        .like-words {
          font-size: 14px;
          color: #888;
        }
      }
    }
    .shop-money {
      display: flex;
      justify-content: space-around;
      div {
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 25px;
      }
      .fs13 {
        font-size: 13px;
        color: #888;
      }
      .fs20 {
        font-size: 20px;
        color: black;
      }
    }
  }
  .supports {
    background-color: #fff;
    margin-top: 20px;
    padding: 10px;
    .supports-content {
      color: red;
      font-size: 13px;
      line-height: 20px;
      border-bottom: 1px solid #eee;
      padding-bottom: 20px;
    }
    .supportsList {
      padding-bottom: 40px;
      .reduce {
          color: rgb(250, 69, 69);
          padding: 5px;
          background-color: #fff;
          margin-right: 5px;
        }
      .supportsListWords {
        font-size: 14px;
      }
    }
  }
}
</style>